﻿<!doctype=html>
<title>HTML5 Canvas demo</title>
<head>
    <!--样式表-->
    <style type="text/css">
        canvas {
            border: 1px dashed black;
        }
    </style>

    <!--编写js脚本-->
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            //开始绘制各种矩形

            /*方式一，利用线条绘制
             context.moveTo(50,50);
             context.lineTo(50,150);
             context.lineTo(150,150);
             context.lineTo(150,50);
             context.lineTo(50,50);
             context.stroke();
             */

            /*
             //f方法二绘制实心矩形
             context.fillStyle="blue";
             context.strokeStyle="red";
             context.fillRect(50,50,200,100);

             //绘制边框
             context.lineWidth=2;
             context.strokeRect(50,50,200,100);
             */

            //绘制一个三角形
            context.moveTo(200, 50);
            context.lineTo(100, 150);
            context.lineTo(300, 150);
            //context.lineTo(200,50);
            context.closePath();

            //填充内部
            //context.fillStyle = "orange";
            //context.fill();

            //绘制轮廓
            //context.lineWidth = 10;
            //context.strokeStyle = "#cd2828";
            context.stroke();
        }

    </script>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>